<template>
  <div class="simple-chart-container">
    <el-row class="simple-chart" :gutter="10">
      <el-col :xs="24" :sm="12" :lg="8">
        <LineArea class="chart-bottom" height="400px" width="100%"/>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <Bar class="chart-bottom" height="400px" width="100%"/>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <Pie class="chart-bottom" height="400px" width="100%"/>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <Scatter class="chart-bottom" height="400px" width="100%"/>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <Candlestick class="chart-bottom" height="400px" width="100%"/>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <Radar class="chart-bottom" height="400px" width="100%"/>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <Graph class="chart-bottom" height="400px" width="100%"/>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <Sunburst class="chart-bottom" height="400px" width="100%"/>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <Gauge class="chart-bottom" height="400px" width="100%"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import LineArea from './components/LineArea.vue'
import Bar from './components/Bar.vue'
import Pie from './components/Pie.vue'
import Scatter from './components/Scatter.vue'
import Candlestick from './components/Candlestick.vue'
import Radar from './components/Radar.vue'
import Graph from './components/Graph.vue'
import Sunburst from './components/Sunburst.vue'
import Gauge from './components/Gauge.vue'

export default {
  name: 'index',
  components:{
    LineArea,
    Bar,
    Pie,
    Scatter,
    Candlestick,
    Radar,
    Graph,
    Sunburst,
    Gauge
  }
}
</script>

<style lang="scss" scoped>
.chart-bottom{
  margin-bottom: 10px;
}
</style>
